<!-- 首页 -->
<template>
	<view>
		<view class="nav-top">
			<!-- <image style="position: absolute;height: 360rpx;" src="/static/image/index-bg@3x.jpg"></image> -->
			<image class='bg' style="position: absolute;" src="/static/image/index-bg@3x.jpg" catchtap='navmap'>
			</image>
		</view>
		<!-- 顶部区域  :class="[userInfo.Icon ? 'active' : 'background']"-->
		<view class="nav-body" style="margin-top: 50rpx;">
			<view class="flex" v-if="!userInfo.UnionId" style="background-color:transparent;flex-direction: column;">
				<image style="width: 580rpx;height: 141rpx;" src="/static/image/indexLogo.png" m></image>
				<view class="denglu" @click="login">登录/注册</view>
			</view>
			<view v-else style="">
				<view class="flex jbetween" style="align-items: center;padding: 30rpx 40rpx 20rpx 12rpx;">
					<view class="" style="">
						<image style="width: 580rpx;height: 141rpx;" src="/static/image/indexLogo.png" m></image>
					</view>
					<view class="userAvatarUrl">
						<view class="UCenter-bg">
							<block v-if="userInfo">
								<image :src="userInfo.Icon" class="headerimg"></image>
							</block>
							<block v-else></block>
						</view>
					</view>
				</view>
				<!-- 	<view class="flex" style="justify-content: flex-end;padding-right: 30rpx;">
					<view class="kefu" @click="freeTell">
						<image src="/static/image/telephone@2x.png"></image>客服
					</view>
				</view> -->
			</view>
			<!-- 列表区域 -->
			<view style="border-radius: 10rpx;">
				<uni-section title="收藏记录" type="line">
					<template>
						<view class="flex" style="padding-bottom: 20rpx;padding-right: 20rpx;">
							<uni-search-bar style="width:100%" :radius="100" bgColor="#fff" placeholder="请输入关键词搜索"
								@confirm="search" v-model="keyWords" @clear="cancel" @cancel="cancel"></uni-search-bar>
						</view>

					</template>
				</uni-section>
			</view>
			<view class="nav-middle" style="">
				<scroll-view style="width: 100%;height: 100%;padding-bottom: 50px;" scroll-y="true"
					@scrolltolower="lower">
					<view v-for="(item,index) in OfMyQueryListData" :key="index" class="container1">
						<!-- bindtap="detail" -->
						<view class="first-box box2">
							<view class="first-box-1 first-box-11">
								<view class="text-s">{{item.RecordName?item.RecordName:""}}</view>
								<uni-icons type="compose" size="20" color="#d1100b"
									@click="editOfMyQueryListClick(item)"></uni-icons>
							</view>
							<view class="first-box-2">
								<view>创建时间: {{item.CreateTime}}</view>
							</view>
						</view>
						<view class="flex jaround">
							<!-- bindtap="detail" -->
							<view class="bottom1-first " @click="detailClick(item)">
								<uni-icons type="wallet" size="20"></uni-icons>
								<view class="text">查看</view>
							</view>
							<view class="bottom1-first" style="margin-left:50rpx">
								<button class="bottom1-share" @click="uniShareClick(item)" open-type="share">
									<uni-icons type="redo" size="22"></uni-icons>
									<view class="text" style="color: #000;">分享</view>
								</button>
							</view>
							<view class="bottom1-first">
								<!-- catchtap="IsJoinML1" -->
								<view class="first-box-2-right">
									<view class="flex" @click="IsJoinML1(item, index)">
										<uni-icons type="trash" size="22" color="red"></uni-icons>
										<view class="text">取消收藏</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="padding-bottom: 50rpx;" v-if="userInfo.Id">
						<uni-load-more :status="status" :content-text="contentText" />
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 公共底部导航栏 -->
		<bar :currentItem="0" @changeItem="changeItem" />
		<!-- 公共弹窗组件 -->
		<PublicPopup ref="PublicPopup" :parentObj="{ ...this }" :vlaue="value" @submit="dialogInputConfirm"
			title="修改收藏名称">
		</PublicPopup>
	</view>
</template>

<script>
	import bar from "../../components/bar.vue" //用用公共底部导航栏
	// 引入公共弹窗组件
	import PublicPopup from "../../components/PublicPopup.vue"
	// 引入公共接口
	import {
		GetTheCSH, // 获取客服信息数据
		GetOfMyQuery, //首页我的收藏列表
		Elevator_Temp_QSRMDeleteData, //取消清单
		Elevator_Temp_QSRMUpdateData, //修改收藏记录名称
	} from '@/common/js/interface.js'

	export default {
		components: {
			bar,
			PublicPopup
		},
		data() {
			return {
				value: "", //公共弹窗组件输入的值
				isClose: false, //四否显示输入框关闭图标
				keyWords: "",
				status: 'loading', // 加载状态
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '已全部加载'
				},
				PageIndex: 1, //当前页
				PageRows: 10, //每页多少条
				Total: 0, //总条数
				OfMyQueryListData: [],
				userInfo: {}, //用户信息
				editObj: {}, //选中的修改名称当前行
				phone: "", //客户服务热线

			};
		},
		onLoad(options) {
			console.log('打印options', options)
			if (options.Id) {
				uni.navigateTo({
					url: `/subPackagesA/pages/shaft/index?Id=${options.Id}&title=查看&share=1`
				})
			}
		},
		// 分享给好友
		onShareAppMessage(res) {
			let index = res.target.dataset.eventOpts[0][1][0][2][0][0][2]
			let Id = this.OfMyQueryListData[index].Id
			console.log('调用分享了', index, Id);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log('分享按钮了', res.target)
			}
			return {
				title: "电梯速查GO", //自定义分享标题
				path: `/pages/index/index?Id=${Id}&title=查看&share=1`, // '/pages/...'分享页面路径（打开分享时进入页），以/开头
				imageUrl: ""
			}
		},

		onShow() {
			uni.hideTabBar()
			let userInfo = uni.getStorageSync('userInfo')
			this.userInfo = userInfo
			// 校验是否授权登录
			var tokens = uni.getStorageSync('token')
			if (tokens) {
				this.Refresh() //初始化
			} else {
				this.OfMyQueryListData = []
			}

		},
		onNavigationBarButtonTap(e) {},
		// 下拉刷新
		onPullDownRefresh() {},

		methods: {
			// 输入框取消  关闭
			cancel() {
				this.keyWords = ""
				// 获取首页我的收藏列表
				this.GetDataListOfMyQuery()
			},
			// 搜索框失去焦点
			inputBlur() {
				this.isClose = !this.isClose
			},
			// 搜索
			search() {
				// 校验是否授权登录
				var tokens = uni.getStorageSync('token')
				if (!tokens) {
					this.keyWords = ""
					this.status = "noMore"
					this.$util.showConfirm({
						content: '检测当前未登录，点击确定前往登录',
						confirmText: "去登录"
					}).then(res => {
						if (res.confirm) {
							uni.redirectTo({
								url: '/subPackagesA/pages/login/login',
							})
						} else {}
					})
					return
				}
				// 获取首页我的收藏列表
				this.GetDataListOfMyQuery()
			},
			// 联系我们
			freeTell: function() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
				})
			},
			// 修改收藏名称弹窗
			editOfMyQueryListClick(item) {
				this.editObj = item
				this.$refs.PublicPopup.open(item.RecordName)
			},
			// 修改收藏名称
			dialogInputConfirm(data) {
				this.editObj.RecordName = data
				Elevator_Temp_QSRMUpdateData(this.editObj).then(res => {
					if (res.Success === true) {
						this.$util.succesToast('修改成功')
						this.Refresh()
					} else {
						this.$util.toast(res.Msg)
					}
				})
			},
			// 分享
			uniShareClick(item) {
				console.log('分享点击', item)
				let title = "电梯速查GO"
				uni.share({
					provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo
					scene: "WXSceneSession", //场景值 分享到聊天界面
					type: 1, //分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等等
					title, // 分享标题
					imageUrl: "https://hzq.yoojet.com/wx.png", //分享封面图片
					href: `/pages/index/index?Id=${item.Id}&title=查看&share=1`, //跳转链接
					summary: title, //分享内容的摘要

					success: function(res) {
						// 此处是调起微信分享成功的回调
						console.log('分享程工回调', res)
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
						// console.log(err);
					}
				});
			},
			// 查看井道
			detailClick(item) {
				uni.navigateTo({
					url: `/subPackagesA/pages/shaft/index?Id=${item.Id}&title=查看`
				})
			},

			Refresh() { //参数初始化
				this.PageIndex = 1
				this.OfMyQueryListData = []
				this.GetDataListOfMyQuery()
			},
			// 取消清单  
			IsJoinML1(item, index) {
				this.$util.showConfirm({
					content: '是否确认取消收藏?'
				}).then(res => {
					if (res.confirm) {
						console.log('取消成功')
						this.$util.showLoading('取消中...')
						Elevator_Temp_QSRMDeleteData([item.Id]).then((res) => {
							if (res.Success === true) {
								this.$util.succesToast('取消成功')
								this.$util.hideLoading()
								this.Refresh()
							} else {
								this.$util.toast(res.Msg)
								this.$util.hideLoading()
							}
						})
					} else {
						this.$util.hideLoading()
					}
				})
			},
			// 触底
			lower(e) {
				var that = this
				this.status = "loading"
				if (this.OfMyQueryListData.length >= this.Total) {
					setTimeout(function() {
						that.status = 'noMore'
					}, 500)
					return
				}
				this.GetDataListOfMyQuery(true)
			},
			// 获取首页我的收藏列表
			GetDataListOfMyQuery(refresh) {
				var that = this
				this.status = "loading"
				this.OfMyQueryListData = []
				let params = {
					"PageIndex": this.PageIndex,
					"PageRows": this.PageRows,
					"SortField": "CreateTime",
					"SortType": "Desc",
					"Search": [{
						"Condition": "RecordName",
						"Keyword": this.keyWords
					}, {
						"Condition": "CreatorId",
						"Keyword": this.userInfo.Id
					}]
				}
				GetOfMyQuery(params).then(
					res => {
						this.Total = res.Total
						if (res.Success) {
							if (res.Data.length == 0) {
								this.OfMyQueryListData = []
								this.status = "noMore"
								return
							}
							res.Data.forEach(item => {
								item.CreateTime = this.$util.formatDate('format', item.CreateTime)
								// 金额保留两位小鼠
							})
							this.OfMyQueryListData = res.Data
							if (refresh) {
								if (this.OfMyQueryListData.length >= this.Total) {
									setTimeout(function() {
										that.status = 'noMore'
									}, 500)
									return
								} else {
									this.PageIndex += 1
									that.status = 'loading'
									that.contentText.contentnomore = "上拉显示更多"
									setTimeout(function() {
										that.OfMyQueryListData = that.OfMyQueryListData.concat(res.Data)
									}, 500)
								}
							} else {
								if (this.OfMyQueryListData.length >= this.Total) {
									setTimeout(function() {
										that.status = 'noMore'
									}, 500)
									return
								}
								setTimeout(function() {
									that.status = 'noMore'
									that.contentText.contentnomore = "上拉显示更多"
								}, 500)
							}
						} else {
							this.$util.toast(res.Msg)
							that.status = 'noMore'
						}
					},
					error => {},
				)

			},
			// 底部导航栏点击事件
			changeItem(item) {
				// 校验是否授权登录
				var tokens = uni.getStorageSync('token')
				if (item.id == 1) {
					if (!tokens) {
						this.$util.showConfirm({
							content: '检测当前未登录，点击确定前往登录',
							confirmText: "去登录"
						}).then(res => {
							if (res.confirm) {
								uni.redirectTo({
									url: '/subPackagesA/pages/login/login',
								})
							} else {
								uni.switchTab({
									url: '/pages/index/index',
								})
							}
						})
						return
					}
					uni.navigateTo({ //查询
						url: item.path + '?title=新建'
					})
				} else {
					uni.switchTab({
						url: item.path
					})
				}
			},
			// 登录注册
			login() {
				uni.navigateTo({
					url: "/subPackagesA/pages/login/login"
				})
			},
		},

	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 500rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.first-box {
		width: 700rpx;
		height: auto;
		margin: 25rpx auto;
		background-color: white;
		border-radius: 10rpx;
		font-size: 30rpx;
		padding: 25rpx 25rpx 25rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.box2 {
		display: block;
		padding-left: 25rpx;
		margin: 0;
		border-bottom: 1rpx #eae8e8 solid;
	}

	.vtabs {
		height: calc(100vh)
	}

	.pb50 {
		padding-bottom: 50px;
	}

	.icon_c {
		height: 100%;
		padding-left: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
	}

	.list {
		position: fixed;
		top: 100rpx;
		left: 0;
	}

	.bottom2-share {
		width: 140rpx;
		height: unset;
		font-size: 20rpx;
		float: right;
		display: flex;
		color: #a3a3a3;
		align-items: center;
		background-color: transparent;
	}

	.bottom2-share::after {
		border: none;
	}

	.container1 {
		background-color: #ffffff;
		border-bottom: 1rpx #eae8e8 solid;
		margin: 25rpx auto;
		width: 700rpx;
		border-radius: 10rpx;
	}

	.bottom1-share {
		width: 100%;
		height: 100%;
		background-color: transparent;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: unset;
		color: #a3a3a3;
		font-size: unset;
		border: unset;
	}

	.bottom1-share::after {
		border: none;
	}

	.center {
		text-align: center;
	}

	.bottom1-first {
		display: flex;
		justify-content: center;
		align-items: center;

		.text {
			padding-left: 10rpx;
		}
	}

	.bottom1 image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.first-box-1 {
		width: 600rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 45rpx;
		font-size: 30rpx;
	}

	.first-box-11 {
		width: 100%;
	}

	.first-box-1 image {
		width: 15rpx;
		height: 26rpx;
	}

	.first-box-2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 20rpx;
		color: #a3a3a3;
		padding-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.first-box-2 image {
		width: 30rpx;
		height: 30rpx;
	}

	.text-s {
		width: 550rpx;
		height: 35rpx;
		line-height: 35rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.first-box-2-right {
		width: 180rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.first-boxs {
		display: flex;
		justify-content: space-between;
	}

	.shopgoodlists {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 25rpx 10rpx 25rpx;
	}

	.shopgoodlist2 {
		padding: 0 25rpx;
	}

	.shopgoodlist2_child {
		margin-top: 10rpx;
		font-size: 28rpx;
		overflow: hidden;
		color: #a3a3a3;
	}

	.bottom2 {
		padding-top: 25rpx;
		padding-right: 25rpx;
		height: 90rpx;
		padding-bottom: 25rpx;
	}

	.bottom2-first {
		font-size: 20rpx;
		color: #a3a3a3;
		align-items: center;
	}

	.bottom2 image {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.nav-top image {
		width: 100%;
		// position: relative;
		top: 0;
	}

	.nav-top image {
		width: 100%;
	}

	.nav-body.active {
		margin-top: 100rpx;
	}

	.nav-body.background {
		// background-color: rgba(255, 255, 255, 0.65);
	}

	.nav-body {
		width: 100%;
		position: absolute;

		// top: 59rpx;
		// left: 25rpx;
		image {
			width: 400rpx;
			height: 90rpx;
			margin: 0 auto;
		}

		.kefu {
			width: 138rpx;
			height: 56rpx;
			border: 1rpx #666666 solid;
			border-radius: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #000000;
		}

		.kefu image {
			width: 22rpx;
			height: 22rpx;
			margin: 0 10rpx 0;
		}

		.userAvatarUrl {
			width: 75rpx;
			height: 75rpx;

			.UCenter-bg {
				.headerimg {
					width: 75rpx;
					height: 75rpx;
					border-radius: 75rpx;
				}
			}
		}

		.png {
			width: 58rpx;
			height: 58rpx;
		}



		.denglu {
			width: 198rpx;
			height: 58rpx;
			line-height: 58rpx;
			background-color: #CA151D;
			font-size: 22rpx;
			color: #fff;
			border-radius: 50rpx;
			margin: 25rpx auto;
			text-align: center;
		}

		.nav-middle {
			margin-top: 9rpx;
			/* #ifdef H5 */
			height: calc(100vh - 310px);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 260px);
			/* #endif */
		}

		::v-deep .uni-section {
			background-color: transparent;
		}

	}
</style>